<template>
	<view class="content">
		<view class="complain-list-title">请选择你遇到的问题：</view>


		<view class="complain-list">
			<view class="complain-item" v-for="(item,index) in list" :key="index" @click="toDetail(index)">
				{{item}}
			</view>
		</view>
		
		
		<!-- <view class="public_footer_help" @click="copy">
		        <view class="words">如需帮助</view><view class="kf">请联系售后QQ客服</view>
		      </view> -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [
					'支付成功商家未提供商品或服务',
					'信息填写错误',
					'重复购买/二次付款',
					'不满意商家的商品或服务',
					'交易非本人支付',
					'其他问题',
				]
			}
		},
		onLoad() {

		},
		methods: {
			toDetail(index) {
				uni.navigateTo({
					url: '/pages/msg/detail?name=' + this.list[index]
				})
			},
			// copy(){
			// 	uni.setClipboardData({
			// 	      data: '1312507423',
			// 	      success: () => {
			// 	        uni.showModal({
			// 	        	title:'提示',
			// 	        	content:'客服QQ号：1312507423已复制，请前去咨询。'
			// 	        })
			// 	      },
			// 	      fail: () => {
			// 	        uni.showToast({
			// 	          title: '复制失败',
			// 	          icon: 'none',
			// 	          duration: 2000
			// 	        });
			// 	      }
			// 	    });
				
			// }
		}
	}
</script>

<style>
	.complain-list-title {
		font-size: 32rpx;
		font-weight: 700;
		padding: 30rpx;
		background-color: #f1f1f1;
	}

	.complain-list {
		padding: 28rpx 28rpx 2rpx;
	}

	.complain-item {
		padding: 24rpx 56rpx 24rpx 24rpx;
		border-radius: 12rpx;
		background: #f0f0f0 url() right 14px center no-repeat;
		background-size: 12rpx 22rpx;
		font-size: 28rpx;
		margin-bottom: 24rpx;
	}
	
	
	 .public_footer_help {
		/* position: fixed;
		 bottom: 0;
		 left: 0; */
	          overflow: hidden;
	          line-height: 1.5;
	          text-align: center;
	          width: max-content;
	          background: #864a30;
	          padding: .4rem;
	          color: #fff;
	          margin: 1rem auto;
	          padding: .8rem;
	          border-radius: .2rem;
	}
	
	.public_footer_help>img {
	    width: .2rem;
	    height: .2rem;
	    margin-right: .05rem;
	    margin-left: .05rem;
	    display: inline-block;
	    vertical-align: middle
	}
	
	.public_footer_help .words {
	    display: inline-block
	}
	
	.public_footer_help .kf {
	    position: relative;
	    display: inline-block;
	    text-decoration: underline;
	    padding-left: 30px;
	    color: #fff;
	}
	
	.public_footer_help .kf::before {
	    content: "";
	    position: absolute;
	    left: 5px;
	    top: 50%;
	    -webkit-transform: translateY(-50%);
	    -moz-transform: translateY(-50%);
	    -ms-transform: translateY(-50%);
	    -o-transform: translateY(-50%);
	    transform: translateY(-50%);
	    background: url() no-repeat;
	    width: 20px;
	    height: 20px;
	    -moz-background-size: 100%;
	    -o-background-size: 100%;
	    background-size: 100%
	}
	
</style>